<div class="container">
    <div class="row">
        <!-- 视频通话区域 -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="video-container position-relative">
                        <!-- 主视频窗口 -->
                        <video id="remoteVideo" class="w-100" autoplay playsinline></video>
                        <!-- 小窗口显示本地视频 -->
                        <video id="localVideo" class="position-absolute" style="width: 150px; right: 10px; bottom: 10px;" autoplay playsinline muted></video>
                    </div>
                    
                    <!-- 视频控制按钮 -->
                    <div class="video-controls mt-3 d-flex justify-content-center gap-3">
                        <button class="btn btn-outline-primary rounded-circle" id="toggleVideo">
                            <i class="fas fa-video"></i>
                        </button>
                        <button class="btn btn-outline-primary rounded-circle" id="toggleAudio">
                            <i class="fas fa-microphone"></i>
                        </button>
                        <button class="btn btn-danger rounded-circle" id="endCall">
                            <i class="fas fa-phone-slash"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 翻译设置和结果区域 -->
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header">
                    语言设置
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">我的语言</label>
                        <select class="form-select" id="myLanguage">
                            <option value="zh">中文</option>
                            <option value="en">英语</option>
                            <option value="ja">日语</option>
                            <option value="ko">韩语</option>
                            <option value="fr">法语</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">对方语言</label>
                        <select class="form-select" id="targetLanguage">
                            <option value="en">英语</option>
                            <option value="zh">中文</option>
                            <option value="ja">日语</option>
                            <option value="ko">韩语</option>
                            <option value="fr">法语</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 邀请链接 -->
            <div class="card mb-3">
                <div class="card-header">
                    邀请好友
                </div>
                <div class="card-body">
                    <div class="input-group">
                        <input type="text" class="form-control" id="inviteLink" readonly>
                        <button class="btn btn-outline-primary" id="copyLink">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 实时翻译结果 -->
            <div class="card">
                <div class="card-header">
                    实时翻译
                </div>
                <div class="card-body">
                    <div class="translation-history" style="height: 200px; overflow-y: auto;">
                        <div class="translation-item mb-2">
                            <small class="text-muted">我说：</small>
                            <p class="mb-1">你好！</p>
                            <small class="text-muted">翻译：</small>
                            <p class="mb-0">Hello!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 蓝牙状态指示器 -->
    <div class="position-fixed bottom-0 end-0 m-3">
        <div class="bluetooth-status bluetooth-disconnected">
            <i class="fas fa-bluetooth-b me-2"></i>
            <span>蓝牙未连接</span>
        </div>
    </div>

    <!-- 悬浮翻译窗口 -->
    <div class="floating-window" style="display: none;">
        <div class="translation-content"></div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const toggleVideoBtn = document.getElementById('toggleVideo');
    const toggleAudioBtn = document.getElementById('toggleAudio');
    const endCallBtn = document.getElementById('endCall');
    const copyLinkBtn = document.getElementById('copyLink');
    const inviteLinkInput = document.getElementById('inviteLink');
    let isVideoEnabled = true;
    let isAudioEnabled = true;

    // 生成随机会议ID
    const meetingId = Math.random().toString(36).substring(7);
    inviteLinkInput.value = `${window.location.origin}/video?meeting=${meetingId}`;

    // 复制邀请链接
    copyLinkBtn.addEventListener('click', () => {
        inviteLinkInput.select();
        document.execCommand('copy');
        alert('邀请链接已复制到剪贴板');
    });

    // 切换视频
    toggleVideoBtn.addEventListener('click', () => {
        isVideoEnabled = !isVideoEnabled;
        toggleVideoBtn.innerHTML = isVideoEnabled ? 
            '<i class="fas fa-video"></i>' : 
            '<i class="fas fa-video-slash"></i>';
        // 这里添加视频开关逻辑
    });

    // 切换音频
    toggleAudioBtn.addEventListener('click', () => {
        isAudioEnabled = !isAudioEnabled;
        toggleAudioBtn.innerHTML = isAudioEnabled ? 
            '<i class="fas fa-microphone"></i>' : 
            '<i class="fas fa-microphone-slash"></i>';
        // 这里添加音频开关逻辑
    });

    // 结束通话
    endCallBtn.addEventListener('click', () => {
        if (confirm('确定要结束通话吗？')) {
            // 这里添加结束通话逻辑
            window.location.href = '#home';
        }
    });

    // 初始化WebRTC
    async function initializeWebRTC() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            });
            document.getElementById('localVideo').srcObject = stream;
            // 这里添加WebRTC连接逻辑
        } catch (error) {
            console.error('获取媒体设备失败:', error);
            alert('无法访问摄像头或麦克风，请检查设备权限');
        }
    }

    // 检查蓝牙连接
    if (!isBluetoothConnected) {
        alert('请先连接蓝牙设备');
    } else {
        initializeWebRTC();
    }

    // 显示悬浮翻译窗口
    function showFloatingTranslation(text) {
        const floatingWindow = document.querySelector('.floating-window');
        floatingWindow.style.display = 'block';
        floatingWindow.querySelector('.translation-content').textContent = text;
    }

    // 添加翻译记录
    function addTranslationHistory(original, translated, isMe = true) {
        const historyContainer = document.querySelector('.translation-history');
        const translationItem = document.createElement('div');
        translationItem.className = 'translation-item mb-2';
        translationItem.innerHTML = `
            <small class="text-muted">${isMe ? '我' : '对方'}说：</small>
            <p class="mb-1">${original}</p>
            <small class="text-muted">翻译：</small>
            <p class="mb-0">${translated}</p>
        `;
        historyContainer.appendChild(translationItem);
        historyContainer.scrollTop = historyContainer.scrollHeight;
    }
});
</script> 